﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Multiple Kanban widgets</title>
    <meta name="description" content="jQuery Kanban Widget with Multiple Kanbans" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsortable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxkanban.js"></script>
    <script type="text/javascript" src="data.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>

    <style>
        #kanbanBox1 {
            width: 400px;
            height: 400px;
            float: left;
            padding: 2px;
        }

        #kanbanBox2 {
            width: 400px;
            height: 400px;
            float: left;
            padding: 2px;
        }

        #outerBox1 {
            float: left;
            padding: 5px;
            margin: 2px;
            background-color: #6bbd49;
            color: #fff;
        }

        #outerBox2 {
            color: #fff;
            float: left;
            padding: 5px;
            margin: 2px;
            background-color: #5dc3f0;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            var staff = [
	            { id: 0, name: "No name", image: "../../jqwidgets/styles/images/common.png", common: true },
	            { id: 1, name: "Andrew Fuller", image: "../../images/andrew.png" },
	            { id: 2, name: "Janet Leverling", image: "../../images/janet.png" },
	            { id: 3, name: "Steven Buchanan", image: "../../images/steven.png" }
            ];

            var kanbanColumns = [
                    { text: "Backlog", dataField: "new", access: "none", maxItems: 5 },
                    { text: "In Progress", dataField: "work", access: "none", maxItems: 5 },
                    { text: "Done", dataField: "done", access: "none", maxItems: 5, collapseDirection: "right" }
            ];
            var kanbanSourceConnected1 = [
                                { id: 3, status: "done", text: "Combine Orders", tags: "orders, combine", color: "#5dc3f0", resourceId: 3 },
                                { id: 4, status: "work", text: "Change Billing Address", tags: "billing", color: "#6bbd49", resourceId: 1 },
                                { id: 5, status: "new", text: "One item added to the cart", tags: "cart", color: "#5dc3f0", resourceId: 3 },
                                { id: 6, status: "work", text: "Login 404 issue", tags: "issue, login", color: "#6bbd49" }
            ];

            var kanbanSourceConnected2 = [
                                { id: 0, status: "new", text: "State opened does not contain items", tags: "state, open", color: "#5dc3f0", resourceId: 1 },
                                { id: 1, status: "done", text: "Patch #2043", tags: "patch", color: "#6bbd49", personId: 2},
                                { id: 2, status: "work", text: "Change payment method", tags: "payment", color: "#6bbd49", resourceId: 2 }
            ];


            $('#kanban').jqxKanban({
                    width: 400,
                    height: 400,
                    source: kanbanSourceConnected1,
                    connectWith: "#kanban2",
                    columns: kanbanColumns,
                    resources: staff
            });
            $('#kanban2').jqxKanban({
                    width: 400,
                    height: 400,
                    source: kanbanSourceConnected2,
                    connectWith: "#kanban",
                    columns: kanbanColumns,
                    resources: staff
            });
        });
    </script>
</head>
<body>
    <div id="outerBox1">
        <h2>Team 1</h2>
        <div id="kanbanBox1">
            <div id="kanban"></div>
        </div>
    </div>
    <div id="outerBox2">
        <h2>Team 2</h2>
        <div id="kanbanBox2">
            <div id="kanban2"></div>
        </div>
    </div>
    <div class="clearing"></div>
</body>
</html>
